vue项目中播放rtmp视频文件流 |
您所在的位置：网站首页 › 前端 rtmp › vue项目中播放rtmp视频文件流 |
vue项目中播放rtmp视频文件流
|
vue项目中播放rtmp视频文件流
想要播放rtmp视频文件流用H5的video标签是不可行的，所以这里我引用了一款插件 vue-video-player ，当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash。最后还要特别注意的是必须使用npm安装，当然我在安装过程中也遇到了一个问题，就是在选择使用 vue-video-player前还安装了videojs插件，卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响，一直运行不起来，后面我把node_modules相关的视频组件都删除以及package中的安装目录都删除后从新安装就可以运行了，如果你们有遇到这种类似的情况可以对你们有帮助。 下面展示一些相关的操作步骤： 1、安装vue-video-player和videojs-flash插件 npm install vue-video-player --save npm install video-flash --save2、在package里面查看是否安装成功以及安装后的版本，如下图所示： 或者是在当前页面引用，如下所示： import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' import 'videojs-flash'在这里我需要特别说明的是引用时必须注意videojs-flash必须要放在vue-video-player的后面，不然同样也会导致视频无法正常播放。 4、下面就是简单的应用案例，如果你需要更多的详细规则可以查看npm插件安装的网站https://www.npmjs.com/package/vue-video-player 完整案例说明如下： import 'video.js/dist/video-js.css' import { videoPlayer } from 'vue-video-player' import 'videojs-flash' export default { components: { videoPlayer }, data(){ return{ playerOptions: {//测试视频流数据 width: "210", height: "134", language: 'zh-CN', techOrder: ['flash'], muted: true, autoplay: true, controls: true, loop: true, sources: [{ type: 'rtmp/mp4', src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //rtmp流地址 }], poster: 'static/fire/bgpp.png', flash:{ swf:'static/video-js.swf' //视频屏幕小于400x300时设置 } }, } } }5、部分bug解决办法 ①当视频小于400x300时，视频不能自动播放，在flash下面添加静态video-js.swf资源，如上面案例所示； ②如果是像这样（rtmp://192.168.20.185:1935/live/openUrl/l2MJZsI）的流文件，需要在后面加一个 ‘/’ 才可以播放 ③videojs-flash和vue-video-player的顺序问题，vue-video-player必须放置在videojs-flash之前 ④如果都没有上面的问题，可以查看一下是否浏览器的flash是否开起，开起可以在浏览器的设置里面去搜索flash，查到后设置允许即可 ⑤vue-video-player 其实就是 video.js 集成到 vue 中，所以千万不要再安装 video.js，如果安装后会出错 ⑥视频流静音播放，一般情况下设置muted为true则表示静音播放，但是在这里会失效，所有需要手动去设置视频流的声音volume =0，除此之外还需要等待视频已经渲染成功后才可以去设置声音，这样就必须要将设置声音的代码写在**$nextTick()** 函数内 that.$nextTick(()=>{ this.$refs.videoPlayer[0].player.cache_.volume = 0; }); |
3、全局引用，在main.js文件中引入，如下图所示：【本文地址】